.nom-number-spinner-icon-opt {
  cursor: pointer;
}

.nom-number-spinner {
  .nom-control {
    position: relative;

    .nom-icon{
      font-size: 8px;
    }

    .spinner-input-with-double-icon {
      position: absolute;
      left: 1.25rem;
      width: calc(100% - 2.5rem);
    }

    .spinner-input-with-left-icon {
      position: absolute;
      left: 1.25rem;
      width: calc(100% - 1.25rem);
    }

    .spinner-input-with-right-icon {
      position: absolute;
      // right: 2.5rem;
      width: calc(100% - 1.25rem);
    }

    .nom-textbox-right-icon-container {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      // width: 2.5rem;
      width: 1rem;
      height: @input-height-base;
      color: var(--nom-input-color);
      line-height: @input-height-base;
      border: 1px solid var(--nom-border-color);
      border-radius: var(--nom-border-radius);
      cursor: pointer;

      &.nom-icon:hover {
        background-color: var(--nom-color-hover);
      }

      &.nom-icon:active {
        background-color: var(--nom-color-fill-2);
      }

      .nom-icon:hover {
        background-color: var(--nom-color-hover);
      }

      .nom-icon:active {
        background-color: var(--nom-color-fill-2);
      }
    }

    .nom-textbox-left-icon-container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      width: 1rem;
      height: @input-height-base;
      color: var(--nom-input-color);
      line-height: @input-height-base;
      border: 1px solid var(--nom-border-color);
      border-radius: var(--nom-border-radius);
      cursor: pointer;

      &.nom-icon:hover {
        background-color: var(--nom-color-hover);
      }

      &.nom-icon:active {
        background-color: var(--nom-color-fill-2);
      }

      .nom-icon:hover {
        background-color: var(--nom-color-hover);
      }

      .nom-icon:active {
        background-color: var(--nom-color-fill-2);
      }
    }
  }

  &.s-disabled {

    .nom-textbox-right-icon-container,
    .nom-textbox-left-icon-container {
      background-color: var(--nom-input-bg-disabled);
      cursor: @cursor-disabled;
    }

    .nom-icon:hover {
      background-color: unset !important;
    }
  }
}
